<template>
  <div :class="name"  style="text-align: left;">
    <Tabs class="iview-tab-location">
      <TabPane label="地名定位">
        <Input v-model="searchName" search suffix="ios-search" @on-search="searchAddress" clearable  placeholder="请输入地址" style="width: 100%"/>
        <div >
          <ul>
            <li class="iview-item-text" v-for="list in currentData" @click="positionToMap($event,list)">{{list.Name}}
            </li>
          </ul>
          <Page v-if="pageTotal" :total="pageTotal" :current="pageNum" show-total
                @on-change="handlePage" @on-page-size-change='handlePageSize'></Page>
        </div>

      </TabPane>
      <TabPane label="坐标定位">
        <Form ref="formValidate" :model="formValidate" label-position="top" :rules="ruleValidate">
          <FormItem label="经度">
            <Input v-model="formValidate.longitude" placeholder="请输入经度" style="width: 100%"/>
          </FormItem>
          <FormItem label="纬度">
            <Input v-model="formValidate.latitude" placeholder="请输入纬度" style="width: 100%"/>
          </FormItem>
          <Button type="info" long @click="handleSubmit()">确定</Button>
        </Form>
      </TabPane>
    </Tabs>
  </div>
</template>

<script>
//import global_ from "./Global";
import axios from "axios";
import qs from "qs";
import layerManager from "./LayerManager";
import bus from "./Bus";

export default {
  props: {
    mapId: {
      type: String,
      default: "mainMap"
    }
  },
  data() {
    return {
      searchUrl: this.GLOBAL.addressUrl,
      searchName: "",
      name: "dataLocation",
      formValidate: {
        longitude: "",
        latitude: ""
      },
      ruleValidate: {
        longitude: [{ required: true, type: "string", trigger: "change" }],
        latitude: [{ required: true, type: "string", trigger: "change" }]
      },
      pageTotal: 0,
      pageNum: 1,
      pageSize: 7,
      data: [],
      currentData: [],
      currentHGraphic: null,
      data1: [
        { name: "地址是文三路十一号" },
        { name: "地址是杭州市西湖区文三路十一号" },
        { name: "地址是杭州市西湖区文三路十一号" },
        { name: "地址是杭州市西湖区文三路十一号" },
        { name: "地址是杭州市西湖区文三路十一号" },
        { name: "地址是杭州市西湖区文三路十一号" },
        { name: "地址是杭州市西湖区文三路十一号" }
      ],
      data2: [
        { name: "地址是文三路十号" },
        { name: "地址是杭州市西湖区文三路十号" },
        { name: "地址是杭州市西湖区文三路十号" },
        { name: "地址是杭州市西湖区文三路十号" },
        { name: "地址是杭州市西湖区文三路十号" },
        { name: "地址是杭州市西湖区文三路十号" },
        { name: "地址是杭州市西湖区文三路十号" }
      ],
      data3: [
        { name: "地址是高新路六十五号" },
        { name: "地址是杭州市高新路六十五号" },
        { name: "地址是杭州市西湖区高新路六十五号" },
        { name: "地址是杭州市西湖区高新路六十五号" },
        { name: "地址是杭州市西湖区文高新路六十五号" },
        { name: "地址是杭州市西湖区高新路六十五号" },
        { name: "地址是杭州市西湖区高新路六十五号" }
      ]
      // clearAll:false
    };
  },
    computed:{
currentDataIndex:function(){
  var newArray=[];
  for(var i=0;i<this.currentData.length;i++){
    newArray[i]=this.currentData[i];
newArray[i].Name=i+":"+currentData[i].Name;
  }
return newArray
}},
  watch: {
    searchName: function(newValue) {
      var self = this;
      if (newValue == "") {
        /*   self.data.length = 0;
        self.currentData.length = 0;
        self.pageTotal = 0;
        layerManager.clearGraphic(self.mapId); */
        self.clearAll();
      }
    }
  },

  methods: {
    clearAll() {
      var self = this;
        self.data.length = 0;
        self.currentData.length = 0;
        self.pageTotal = 0;
        self.searchName="";
        layerManager.clearGraphic(self.mapId);
      
    },
    searchAddress(value) {
      var self = this;
      //self.clearAll = false;
      if (value) {
        var url = this.searchUrl + "?FORMAT=json&key=" + value;

        let postData = this.$qs.stringify({
          key: value,
          FORMAT: "json"
        });
        this.$axios({
          method: "post",
          url: url
          // data: postData
        }).then(res => {
          console.log(res);
          self.data = res.data;
          self.pageTotal = res.data.length;
          if(self.pageTotal){
            var length= self.pageSize;
            if(self.pageTotal<length)
            length=self.pageTotal;         
          for (var i = 0; i < length; i++) {
            self.currentData[i] = self.data[i];
            self.currentData[i].Name=(i+1)+":"+self.currentData[i].Name;
             self.currentData[i].index=i+1;
          }
          layerManager.addPositionLayer(self.mapId, self.currentData);
          }else{
             self.currentData.length=0;
          }
        });
      } else{
        self.data.length = 0;
        self.currentData.length = 0;
        self.pageTotal = 0;
        layerManager.addPositionLayer(self.mapId, self.currentData);
      }
    },
    handleSubmit(name) {
      var m = this;
      if (!m.$refs.formValidate.model.longitude) {
        this.$Message.warning("经度不能为空！！");
        return;
      } else if (isNaN(m.$refs.formValidate.model.longitude)) {
        this.$Message.warning("经度必须是数字！！");
        return;
      } else if (!m.$refs.formValidate.model.latitude) {
        this.$Message.warning("纬度不能为空！！");
        return;
      } else if (isNaN(m.$refs.formValidate.model.latitude)) {
        this.$Message.warning("纬度必须是数字！！！");
        return;
      }
      layerManager.mapPosition(
        this.mapId,
        m.$refs.formValidate.model.longitude,
        m.$refs.formValidate.model.latitude
      );
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
    handlePage(value) {
      this.pageNum = value;
      this.getAddressrMessages();
    },
    handlePageSize(value) {
      this.pageSize = value;
      this.getAddressrMessages();
    },
    //获取教师信息列表
    getAddressrMessages() {
      var m = this;
      m.currentData.length = 0;
      var k=1;
      for (
        var i = m.pageNum * m.pageSize;
        i < m.getMin(m.pageNum * m.pageSize + 7,m.data.length);
        i++
      ) {
        var cdata=m.data[i];
        // m.currentData[i] = self.data[i];
            cdata.Name=(k)+":"+m.data[i].Name;
             cdata.index=k;
             k++
        m.currentData.push(cdata);
      }
      layerManager.addPositionLayer(m.mapId, m.currentData);
      m.currentHGraphic = null;
      /* var url = 'page?'
          //传入后台的pageNum和pageSize
          url = url + "pageNum=" + m.pageNum + '&pageSize=' + m.pageSize;
          if(this.pageNum ==1){
            m.data=m.data1;
          }
          if(this.pageNum ==2){
            m.data=m.data2;
          }
          if(this.pageNum ==3 ){
            m.data=m.data3;
          } */
      /*this.$http.get(url).then(response => {
            if (response.data.code == '000000') {
              var storageteachers = response.data.data
              //绑定的iview table数据，是一个数组
              m.data1 = storageteachers
              //绑定的总数据条数，后台接口返回
              m.pageTotal = parseInt(response.data.message)
            }
          }).catch(error => {
            console.log(error)
          })*/
    },
    getMin:function(a,b){
if(a>b){
return b;
}
else{
  return a;
}

    },
    positionToMap: function(e, data) {
      var map = this.GLOBAL.maps[this.mapId]; //global_.maps[this.mapId];
      //获取到数据 定位到地图上 并且高亮
      layerManager.positionAndHeight(this.currentHGraphic, data, map);
      this.currentHGraphic = data;
      const ele = e.target;
      // class 为xxx 的清除 active状态
      const li = document.getElementsByClassName("active");
      for (let i = 0; i < li.length; i++) {
        li[i].className = "iview-item-text";
      }
      // 当前点击的 加上active状态
      ele.className = "iview-item-text active";
    }
  },
  mounted: function() {
    var m = this;
    m.data = m.data1;
    bus.$on("clear-search", function(name) {
      if (name == "location") {
        m.clearAll();
       // this.clearAll();
      }
    }.bind(this));
  }
};
</script>

<style lang="less" rel="less">
@name: dataLocation;
.@{name} {
  .iview-tab-location {
    li.iview-item-text {
      padding: 5px 0;
    }
    .ivu-tabs-nav-wrap {
      margin-bottom: 0px;
      .ivu-tabs-nav-scroll {
        overflow: hidden;
        white-space: nowrap;
        text-align: center;
        display: flex;
        justify-content: center;
      }
      .ivu-tabs-nav {
        width: 100%;
        /*display: flex;
            justify-content: space-around;
            width: 100%;*/
        .ivu-tabs-tab {
          width: 50%;
          margin-right: 0;
        }

        .ivu-tabs-ink-bar {
          display: none;
          /*background-color: transparent;*/
        }
        & :last-child {
          border-left: 0 !important;
        }
      }
    }
    .ivu-tabs-content {
      .ivu-tabs-tabpane {
        h3,
        .ivu-input-wrapper,
        .ivu-btn {
          margin: 10px 0;
        }
      }
    }
  }
}

  .ivu-form-item{
     margin-bottom: 0 !important;
  }
  .ivu-form-label-top .ivu-form-item-label{
    padding: 0 0 0px 0 !important;
  }
  .iview-tab-location li {
    cursor: pointer;
  }
</style>
